<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <title>验货单详情</title>
    <link rel="stylesheet" href="../css/font-awesome.min.css"/>
    <link rel="stylesheet" href="../css/style.css"/>
</head>
<body>
<div class="container">
    <div class="header">
        <span class="span8 text-ellapse">
            <a href="index.html"><i class="icon-angle-left icon-large"></i></a>验货单详情
        </span>
    </div>
    <div class="main" style="overflow-y: auto">
        <div>
            <table class="danju bg-white">
                <tr class="bg-fa">
                    <th style="width:1%"></th>
                    <th style="width:20%">物料名称</th>
                    <th style="width:10%">数量</th>
                    <th style="width:10%">单位</th>
                    <th style="width:15%">条只数</th>
                    <th style="width:10%">单价</th>
                    <th style="width:20%">金额</th>
                    <th style="width:13%"></th>
                </tr>
            </table>
        </div>
        <!-- 20160811 增加style-->
        <div class="item-header" style="border-bottom:none">前厅部门</div>
        <!-- 单据列表-->
        <table class="danju bg-white">
            <tr class="bg-fa">
                <th style="width:1%"></th>
                <th style="width:20%">物料名称</th>
                <th style="width:10%">数量</th>
                <th style="width:10%">单位</th>
                <th style="width:15%">条只数</th>
                <th style="width:10%">单价</th>
                <th style="width:20%">金额</th>
                <th style="width:13%"></th>
            </tr>
            <tr>
                <td class="state empty"></td>
                <!-- 20160811 text-left修改为text-center-->
                <td class="name text-center">鲤鱼鲤鱼鲤鱼鲤鱼鲤</td>
                <td><input type="number" placeholder="输入"/></td>
                <td><i>ml</i></td>
                <td><input type="number" placeholder="输入"/></td>
                <td><input type="number" placeholder="输入" pattern="[0-9]{2}"/></td>
                <td><i>10000.00</i></td>
                <td><i class="icon-yan-ju">验</i></td>
            </tr>
        </table>
        <div class="mt2 text-center">
            <p><img src="" alt=""/></p>

            <p class="font32 text-99">空空如也，快去增加物料吧</p>
        </div>
    </div>
    <div class="footer">
        <a href="jushou.html" class="btn btn-beizhu span3">拒收</a>
        <button class="btn btn-submit span7" type="button">
            验收
            <span class="text-66 font28">(共计<i id="sel-num">0</i>条)</span>
        </button>
    </div>
</div>
<script src="../js/zepto.min.js"></script>
<script src="../js/msgBox.js"></script>
<script>
    //数量发生变化时设置样式和选中数量
    $("input[type='number']").on('change', function () {
        var inputs = $(this).parents('tr').find("input[type='number']");
        var flag = false;
        inputs.each(function () {
            if ($(this).val() != '') {
                flag = true;
                return false;
            }
        });

        if (flag) {
            if (!$(this).parent().siblings('td:first-child').hasClass('full')) {
                $(this).parent().siblings('td:first-child').addClass('full');
                $('#sel-num').text(parseInt($('#sel-num').text()) + 1);
            }
        }
        else {
            $(this).parent().siblings('td:first-child').removeClass('full');
            $('#sel-num').text(parseInt($('#sel-num').text()) - 1);
        }
    });

    $('.icon-yan-ju').on('click', function () {
        $(this).parents('tr').toggleClass('bg-eaf4fe');
    });

    $('.btn-submit').on('click', function () {
        $.msgbox({
            msgContent: '确定验收该30条物料',
            cancel: function () {
            },
            submit: function () {
//                todo 保存跳转
            },
            close: false
        });
    })
</script>
</body>
</html>